<template>
    <div class="module-card">
        <div class="module-header">
            <h2 class="module-title">异常日志</h2>
            <button class="text-primary text-sm hover:underline" @click="clearErrorLogs">清空日志</button>
        </div>
        <div class="divide-y divide-gray-100 max-h-80 overflow-y-auto">
            <div class="p-3 hover:bg-gray-50 transition-colors" v-for="(log, index) in errorLogs" :key="index">
                <div class="flex justify-between items-start">
                    <div class="font-medium text-sm" :class="log.levelClass">{{ log.title }}</div>
                    <span class="text-xs text-gray-500">{{ log.time }}</span>
                </div>
                <div class="mt-1 text-sm text-gray-600">{{ log.message }}</div>
                <div class="flex justify-between items-center mt-2">
                    <span class="text-xs px-2 py-0.5" :class="log.levelBadgeClass">{{ log.levelText }}</span>
                    <button class="text-xs text-primary hover:underline" @click="viewLogDetails(log.id)">查看详情</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'ErrorLogRecords',
    data() {
        return {
            errorLogs: [
                {
                    id: 1,
                    title: '数据库连接失败',
                    message: '无法连接到主数据库服务器，请检查网络连接和数据库状态',
                    time: '2023-10-15 08:32:45',
                    levelText: '错误',
                    levelClass: 'text-danger',
                    levelBadgeClass: 'bg-danger/10 text-danger'
                },
                {
                    id: 2,
                    title: 'API请求超时',
                    message: '调用支付接口超时，响应时间超过30秒',
                    time: '2023-10-15 09:15:22',
                    levelText: '警告',
                    levelClass: 'text-warning',
                    levelBadgeClass: 'bg-warning/10 text-warning'
                },
                {
                    id: 3,
                    title: '内存使用率过高',
                    message: '系统内存使用率达到85%，建议释放不必要的资源',
                    time: '2023-10-15 10:47:11',
                    levelText: '警告',
                    levelClass: 'text-warning',
                    levelBadgeClass: 'bg-warning/10 text-warning'
                },
                {
                    id: 4,
                    title: '用户认证失败',
                    message: '用户尝试使用无效凭证登录系统，IP地址: 192.168.1.105',
                    time: '2023-10-15 14:22:36',
                    levelText: '信息',
                    levelClass: 'text-info',
                    levelBadgeClass: 'bg-info/10 text-info'
                }
            ]
        };
    },
    methods: {
        clearErrorLogs() {
            if (confirm('确定要清空所有异常日志吗？')) {
                this.errorLogs = [];
            }
        },
        viewLogDetails(logId) {
            // 查看日志详情逻辑
            this.$emit('view-log-details', logId);
        }
    }
}
</script>